<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>登录页面</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}

			.container {
				display: flex;
				width: 100vw;
				height: 100vh;
				align-items: center;
				justify-content: center;
				background: url(img/mc.jpg) center center;
				background-size: cover;
			}

			form {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 18vw;
				height: 20vw;
				background: transparent;
				border-radius: 8px;
				padding: 20px;
				box-shadow: 10px 10px 40px #303030;
			}

			.row {
				width: 100%;
			}

			input,
			button {
				outline: none;
				border: none;
				width: 100%;
				height: 40px;
				line-height: 40px;
				margin-bottom: 20px;
				letter-spacing: 4px;

			}
			input {
				background-color: transparent;
			}
			button {
				background-color: #EB7350;
				color: #fff;
				border-bottom: 2px solid #c0c0c0;

			}
		</style>
	</head>
	<body>
		<div class="container">
			<form action="" method="get">
				<div class="row">
					<input type="text" name="name" placeholder="请输入你的用户姓名"  required />
				</div>
				<div class="row">
					<input type="password" name="pa" placeholder="请输入你的密码" required>
				</div>
				<button type="submit">登录</button>
				<button type="reset">重置</button>
				<input type="submit" value="王萍"/>
			</form>
		</div>
	</body>
</html>
